<template>
  <div class="main">
    <div class="body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <ul>
            <li>
              <span>车辆编号：</span><el-input v-if="isinput" v-model="cardata.truckLicenseId" disabled placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ cardata.truckLicenseId }}</span>
            </li>
            <li>
              <span>车牌号码：</span><el-input v-if="isinput" v-model="cardata.licensePlate" placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ cardata.licensePlate }}</span>
            </li>
            <li>
              <span> 车型名称：</span><el-input v-if="isinput" v-model="cardata.truckTypeName " placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ cardata.truckTypeName }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span> 车辆体积：
                <el-input
                  v-if="isinput"
                  v-model="cardata.allowableVolume "
                  maxlength="3"
                  style="width:50%"
                  placeholder="请输入驾驶证有效期限"
                >
                  <span slot="suffix" style="color:black" class="el-input__icon">m³</span>
                </el-input>
                <span v-else>{{ cardata.allowableVolume }}m³</span>
              </span></li>
            <li>
              <span>车辆载重：
                <el-input
                  v-if="isinput"
                  v-model=" cardata.allowableLoad "
                  maxlength="3"
                  style="width:50%"
                  placeholder="请输入"
                >
                  <span slot="suffix" style="color:black" class="el-input__icon">吨</span>
                </el-input>
                <span v-else>{{ cardata.allowableLoad }}吨</span>
              </span></li>
            <li>
              <span> GPSID：</span><el-input v-if="isinput" v-model="cardata.deviceGpsId" placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ cardata.deviceGpsId }}</span>
            </li>
          </ul>
          <ul>
            <li style="align-items:flex-start!important">
              <div style="width:100px">图片信息</div>
              <span>
                <div class="image-container">
                  <div class="mock"><i class="el-icon-zoom-in" @click="openpic" /></div>
                  <img src="../../../assets/assets/map.png" alt="Your Image">
                </div>
                <div class="image-container">
                  <div class="mock"><i class="el-icon-zoom-in" @click="openpic" /></div>
                  <img src="../../../assets/assets/map.png" alt="Your Image">
                </div>
                <el-upload
                  action=""
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus" />
                </el-upload>

                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <!-- <img src="../../../assets/assets/map.png" alt=""> -->
                <!-- <img src="../../../assets/assets/map.png" alt=""> -->
              </span>

              <!-- <el-input v-if="isinput" v-model="cardata.passCertificate" placeholder="请输入内容" style="width:50%" /> -->
              <!-- <img v-else :src="cardata.picture"> -->
            </li>
          </ul>
          <div class="button">
            <el-button v-if="isinput" type="danger" @click="queren">确认</el-button>
            <el-button v-if="isinput" type="danger" @click="quxiao">取消</el-button>
            <el-button type="danger" @click="edit">编辑</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">
          <div>驾驶证信息</div>
          <div class="button">
            <el-button v-if="isinput" type="danger">确认</el-button>
            <el-button v-if="isinput" type="danger" @click="quxiao">取消</el-button>
            <el-button type="danger" @click="edit">编辑</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :visible.sync="ispic"
      width="40%"
      title=""
    >
      <!-- :before-close="handleClose" -->
      <img src="../../../assets/assets/map.png" alt="" style="width:100%;height:100%">
    </el-dialog>
  </div>
</template>

<script>
import { getOnecardata } from '@/api/driver'
export default {
  data() {
    return {
      // dialogImageUrl: '',
      // dialogVisible: false,
      ispic: false,
      // linshi: {},
      isinput: false,
      // driverdata: { agency: '' },
      cardata: { },
      activeName: 'first',
      id: this.$route.params.id
    }
  },
  created() {
    // this.getOnecarddata()
    this.getOnecardata()
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url
      // this.dialogVisible = true
    },
    async getOnecarddata() {
      // const res = await getOnecarddata(this.id)
      console.log('没有')
      // this.cardata = res.data
    },
    async getOnecardata() {
      console.log(this.id)
      const res = await getOnecardata(this.id)
      this.cardata = res.data
      console.log(this.cardata)
    },
    async editOnedriver() {
      // const { age, picture, mobile, name, id, userId, workStatus } = this.driverdata
      // const res = await editOnedriver({ age, avatar: picture, mobile, name, userId, workNumber: id, workStatus })
      // console.log(res)
    },

    handleClick() {
      // this.isinput = false
    },
    edit() {
      this.isinput = true
      // this.linshi.age = this.driverdata.age
    },
    quxiao() {
      this.isinput = false
      // this.driverdata.age = this.linshi.age
    },
    queren() {
      // this.editOnedriver()
    },
    openpic() {
      // this.ispic = true
    }

  }

}
</script>

<style lang="scss" scoped>
li{
  list-style: none;
}
.main{
padding: 0 20px;
.body{
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 10px;
  ul{
    display: flex;
    li{
      flex: 1;
      display: flex;
      align-items: center;
      span{
        display: flex;
           .image-container {
                   position: relative;
                   display: inline-block;
                   margin: 10px;
                       .mock{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                            background-color: rgba(0, 0, 0, 0.5); /* 遮罩层的颜色和透明度 */
                            opacity: 0;
                            text-align: center;
                            line-height: 160px;
                              i{
                               font-size: 40px;
                                color: #fff  ;
                                 cursor: pointer;
                              }
                            }
                       .mock:hover {
                       opacity: 1; /* 鼠标悬停时显示遮罩层 */
                            }
                        img {
                          display: block;
                          width: 200px;
                          height: 150px;
                          border-radius: 10px;
                             }
                        }
      }
    }

  }
  .button{
    display: flex;
    justify-content: center;

  }
}
}

</style>
